<template>
  <div class="base-header fixed-header">
    <div class="logo" :class="{ 'mini-logo': isCollapse }">
      凯普奇网络资源管理系统
    </div>
    <span v-if="!noMenu" @click="changeCollapse" class="header-icon">
      <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </span>
    <div class="header-menu">
      <div v-for="m in headerMenu" :key="m.csysMenuId" @click="changeMenu(m)" class="header-menu-btn" :class="{actived: $route.name === m.menuUrl}">{{ m.menuName }}</div>
    </div>
    <div class="uname">
      <!--            国际化,暂时隐藏 -->
      <!-- <el-dropdown style="float:right;">
        <div class="el-dropdown-link">
          <template v-for="m in dropdown">
            <a
              :key="m.key"
              href="javascript:;"
              :class="{ actived: lang == m.key }"
              v-if="lang == m.key"
              >{{ $i18n.t('language') }}</a
            >
          </template>
          <i class="el-icon-orange el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="header-drop">
          <el-dropdown-item
            v-for="m in dropdown"
            :key="m.value"
            @click.native="m.fn()"
            >{{ m.label }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown> -->
      <el-dropdown trigger="click" placement="bottom-end">
        <span class="el-dropdown-link">
          <span><img src="../../deps/public/userImg.png" height="25" />{{ userName }}</span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-magic-stick" @click.native="changeTheme">{{ themeClass === 'theme-black' ? '日间模式' : '夜间模式' }}</el-dropdown-item>
          <el-dropdown-item icon="el-icon-view" @click.native="resetPassword()">修改密码</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-close" @click.native="logout()">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-dialog title="修改密码" :visible.sync="passwordShow" append-to-body>
      <div class="dialog-form">
        <el-form label-width="80px" :model="passwordData" :rules="editRules" ref="passwordData">
          <el-form-item label="原密码" prop="oldPwd">
            <el-input v-model="passwordData.oldPwd" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input type="password" v-model="passwordData.newPwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="passwordData.checkPass" show-password></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordShow = false" type="text">取 消</el-button>
        <el-button type="primary" @click="submitPassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { get } from 'lodash'
import { setup } from '@/widgets/i18n';
import { loginOut, changePwd, changeOutUserPwd } from '@/deps/api'
import { sessionStorage, localStorage } from '@/deps/utils'
import tips from './tips.vue'
export default {
  components: { tips },
  computed: {
    breadcrumbData() {
      return this.$route.meta
    },
    showTip() {
      return this.$store.state.showTip
    },
    focusElment() {
      return this.$refs.tipDiv
    },
    isCollapse() {
      return this.$store.state.isCollapse
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.passwordData.checkPass !== '') {
          this.$refs.passwordData.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordData.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      lang: localStorage('localeLanguage') || 'zh',
      themeClass: localStorage('themeClass') || 'theme-black',
      dropdown: [
        {
          key: 'zh',
          label: this.$i18n.t('chinese'),
          fn: () => {
            this.changeL('zh')
          }
        },
        {
          key: 'en',
          label: this.$i18n.t('english'),
          fn: () => {
            this.changeL('en')
          }
        }
      ],
      userName: '',
      dialogShow: false,
      passwordShow: false,
      appList: [],
      url: {
        getAppList: '/sysApp/standardApp/list',
        getPriceType: '/sysApp/versions/one/',
        insertOrder: 'sysOrder/orderList/insertByMiddle'
      },
      searchCondition: {},
      purchaseData: {
        appId: '',
        versionId: '',
        unit: '',
        quantity: '',
        companyId: '',
        companyName: '',
        contactName: '',
        contactPhone: '',
        appType: '标准应用'
      },
      passwordData: {
        oldPwd: '',
        newPwd: '',
        checkPass: ''
      },
      appVersionOne: {},
      editRules: {
        oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
      },
      headerMenu: [],
      noMenu: true
    }
  },
  methods: {
    changeL(lang) {
      this.lang = lang;
      setup(lang);
      setTimeout(() => {
        location.reload()
      })
    },
    handleClose() {
      this.$store.commit('CHANGE_TIP', false)
    },
    changeTip() {
      this.$store.commit('CHANGE_TIP', !this.$store.state.showTip)
    },
    changeCollapse() {
      this.$store.commit('CHANGE_COLL', !this.$store.state.isCollapse)
    },
    changeMenu(m) {
      if (this.$route.name === m.menuUrl) return
      this.$bus.$emit('CHANGE_MENU', m.csysMenuId)
    },
    changeTheme() {
      this.themeClass = this.themeClass === 'theme-black' ? 'theme-white' : 'theme-black'
      this.$bus.$emit('CHANGE_THEME')
    },
    submitPassword() {
      const userData = JSON.parse(sessionStorage('userData'));
      const request = userData.userType === 'COOP' ? changeOutUserPwd : changePwd
      request(this.passwordData).then(res => {
        if (res.code === 0) {
          this.$message({
            showClose: true,
            duration: 1000,
            type: 'success',
            message: '修改密码成功，即将跳转至登录页！'
          })
          setTimeout(this.logout, 1500)
        } else {
          alert(res.message)
        }
      })
    },
    purchaseApp() {
      this.dialogShow = true
      this.getApp()
    },
    getApp() {
      this.$http(this.url.getAppList, this.searchCondition, 'get').then(res => {
        if (res.code === 0) {
          this.appList = res.data
        } else {
          alert(res.message)
        }
      })
    },
    getPriceTypeList() {
      let selectedData = this.appList.find(item => item.appId === this.purchaseData.appId)
      this.purchaseData.versionId = selectedData.versionId
      this.$http(this.url.getPriceType + this.purchaseData.versionId, null, 'get').then(res => {
        if (res.code === 0) {
          this.appVersionOne = res.data
        } else {
          alert(res.message)
        }
      })
    },
    logout() {
      this.$router.push({ name: 'login' })
    },
    resetPassword() {
      this.passwordData = {
        oldPwd: '',
        newPwd: '',
        checkPass: ''
      }
      this.$refs.passwordData && this.$refs.passwordData.resetFields()
      this.$nextTick(() => {
        this.passwordShow = true
      })
    }
  },
  created() {
    this.$bus.$on('CHANGE_NO_MENU', (val) => {
      this.noMenu = val
    })
    let userData = sessionStorage('userData')
    !userData ? this.$router.push({ name: 'login' }) : (this.userName = userData ? userData.userName : '')
    this.headerMenu = get(userData, 'entities[0].menus', [])
  }
}
</script>
<style lang="scss">
@keyframes mini {
  from {
    width: 230px;
  }
  to {
    width: 60px;
  }
}

@keyframes max {
  from {
    width: 60px;
  }
  to {
    width: 230px;
  }
}

.base-header {
  height: 40px;
  width: 100%;
  background: var(--bg-color);
  box-shadow: 0px 1px 4px 0px rgba(0,21,41,0.12);
  min-width: 1060px;

  .header-menu {
    position: absolute;
    display: flex;
    left: 150px;
    right: 150px;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;

    .header-menu-btn {
      font-size: 14px;
      cursor: pointer;
      color: var(--text-color);
      padding: 0 24px;
      height: 100%;
      display: flex;
      align-items: center;

      &:hover {
        color: var(--color-primary);
      }

      &.actived {
        color: var(--color-primary);
        border-bottom: 2px solid var(--text-color);
      }
    }
  }

  .logo {
    float: left;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    width: 170px;
    box-sizing: border-box;
    overflow: hidden;
    animation: max 0.2s;
    color: var(--text-color);
    font-size: 13px;
    text-align: center;
  }

  .mini-logo {
    animation: mini 0.2s;
    width: 50px;
    padding-left: 5px;
    font-size: 14px;
    line-height: 40px;
    align-items: start;
  }

  .el-breadcrumb {
    float: left;
    line-height: 40px;
    padding-left: 20px;
  }

  .fa-icon {
    margin-top: 20px;
  }

  a {
    font-size: 22px;
    padding-left: 20px;
  }

  .uname {
    float: right;
    display: flex;
    align-items: center;

    .el-dropdown {
      height: 40px;
      padding-right: 20px;
      padding-top: 8px;
      margin-left: 10px;
      font-size: 12px;
      cursor: pointer;

      img {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
  }

  .header-icon {
    float: left;
    cursor: pointer;
    margin-top: 10px;
    color: var(--text-color);
  }

  .icon-div {
    position: relative;
    float: left;
    height: 40px;
    width: 48px;
    text-align: center;
    color: var(--text-color);
    cursor: pointer;
  }

  .actived {
    background: var(--bg-color);
  }
}

.el-dropdown-menu.el-popper {
  margin: 0;
}

.fixed-header {
  position: fixed;
  top: 0;
  z-index: 99;
}
</style>
